<script setup lang="ts">
import {ref} from "vue"
import {useRouter} from 'vue-router'
import {getAce} from "../serve.ts"
const
    router = useRouter(),
    itemData = ref({list: [],current:1,size:5,total:0}),
    fromData = ref({size: 5, page: 1}),
    load = ref(true)
;

function get() {
  getAce({...fromData.value}).then(r=>{
    itemData.value = r
    load.value = false
  })
}
get()

function sizeChange(size: number) {
  fromData.value.size = size
  get()
}

function currentChange(currPage: number) {
  fromData.value.page = currPage
  get()
}
</script>

<template>
  <el-scrollbar v-loading="load" element-loading-text="加载中...">
    <el-card>
      <div flower-info>
        <div zxd>
          <div v-for="(i,index) in itemData.list" :key="index" zxy @click="router.push({path:'/infoTon-details',query:{id:i['id']}}).catch(()=>true)">
            <img alt="" left :src="JSON.parse(i['imageInput'])"/>
            <div right>
              <div Title>{{ i['title'] }}</div>
              <div ti-right>
                查看详情
                <el-icon icon>
                  <ArrowRight/>
                </el-icon>
              </div>
              <div text>
                {{
                  i['synopsis']
                }}
              </div>
              <div tim>{{ '发布时间：' + i['createTime'] }}</div>
            </div>
            <div line/>
          </div>
        </div>
      </div>
      <div style="width: 100%;height: 300px"/>
      <div v-if="itemData.list.length > 0" page>
        <pagination :pageCurrent="itemData?.current" :pageSize="itemData?.size"
                    :small="true" :total="itemData?.total"
                    class="page" @size-change="sizeChange" @current-change="currentChange"/>
      </div>
    </el-card>
  </el-scrollbar>
</template>

<style scoped lang="scss">
[flower-info] {
  [zxd] {
    margin: 20px 30px;

    [zxy] {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      padding-top: 20px;
      margin-bottom: 30px;
      position: relative;

      [line] {
        width: 100%;
        background-color: #9A9A9D;
        position: absolute;
        top: 0;
        height: 1px;
      }

      [left] {
        width: 300px;
        height: 300px;
        border-radius: 10px;
      }

      [right] {
        text-align: left;
        flex: 1;
        margin-left: 100px;

        [Title] {
          font-size: 20px;
        }

        [ti-right] {
          position: absolute;
          top: 30px;
          right: 0;
          color: #666666;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 30px;
          font-size: 12px;

          [icon] {
            margin-left: 5px;
          }
        }

        [text] {
          margin-top: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }

        [tim] {
          position: absolute;
          bottom: 0;
        }

      }
    }
  }
}
</style>